Ongoing call tiles - Implement the view-models and store by MidhunSureshR · Pull Request #34198 · element-hq/element-web

MidhunSureshR · 2026-07-08T20:47:17Z

Branched from #34197

This PR implements the view-models necessary for driving the views. There's no foolproof way to associate a given call to a rtc notification event (which is what we render as tiles) so the basic idea is to treat the last notification tile in the timeline as an ongoing call tile if there's a call in the room.

There's a BaseOngoingCallTileViewModel that provides the shared snapshot content. DmOngoingCallTileViewModel and RoomOngoingCallTileViewModel both extend this base view model to provide the part of the snapshot that is not common.
Implements FacePileViewModel, MemberAvatarViewModel and DurationViewModel for driving the views from the last PR.
There's a new store, LatestRtcNotificationEventStore, that tracks the latest notification event in a given room. This is necessary because the call store tells you about a new call as soon as a call membership event comes through but the timeline only renders rtc notification events. The problem arises when there's a delay between receiving the call membership event and the notification event. As a result, CallStore tells us that a call is ongoing in the room but the corresponding rtc notification event hasn't arrived, so we incorrectly show the last call tile (which in reality relates to a call that is already over) as ongoing.

dbkr

Phew, this is quite a chunky one (I wonder if we should have landed these tiles one by one or similar).

dbkr · 2026-07-09T10:54:37Z

+    cli: MatrixClient;
+}
+
+function computeSnapshot(props: Props): MemberAvatarViewSnapshot {


it feels a bit weird that computeSnapshot is sometimes a private member function (FacePileViewModel) and sometimes an independent function of the props. I wonder if we should be consistent.

I would prefer it to always be a private member function but sometimes you need to calculate the initial snapshot before you can call any methods of the vm (because you need to pass it to super()). So far we've treated this as an implementation detail.

ah right. I wonder if we could make it always a separate function. Not something for now though.

dbkr · 2026-07-09T11:19:05Z

+    T extends CommonOngoingCallTileViewSnapshot = CommonOngoingCallTileViewSnapshot,
+> extends BaseViewModel<T, Props> {
+    public constructor(props: Props, extraSnapshot: Partial<T> = {}) {
+        const snapshot = { ...computeSnapshot(props), ...extraSnapshot };


computeSnapshot throws a few exceptions: are they handled by whatever constructs this and can we document this as throwing them?

These errors are unlikely to be thrown:

The !roomId throw is unlikely to happen because MatrixEvent.getRoomId() only returns undefined for presence events.

The !startedUserId throw is unlikely to happen because all events have a sender and the undefined type is an implementation quirk from js-sdk.

The !room throw is unlikely to happen because you wouldn't end up in this code without the room existing.

The !startedMember throw is unlikely to happen because MatrixEvent.sender is only undefined for presence events.

But we do have some designs for an error tile so happy to do a follow up PR that collects the errors and renders them out in the timeline.

If they're unlikely then it's probably fine if they're caught by the event tile error boundary

dbkr · 2026-07-09T11:21:09Z

+        const call = getCallInRoom(this.props.callStore, this.props.roomId);
+        this.disposables.trackListener(call, CallEvent.Participants, ((participants: Map<RoomMember, Set<string>>) => {
+            this.onParticipantsChange(participants);
+        }) as (...args: unknown[]) => void);


The casts here (and above) seem a bit weird

It is but this is a typing issue in the base view model code. Will fix separately.

dbkr · 2026-07-09T11:25:47Z

+function isCallDeclinedByOwnUser(
+    notificationEvent: MatrixEvent,
+    getRelationsForEvent: GetRelationsForEvent | undefined,
+    cli: MatrixClient,
+): boolean {
+    const declinedEvents = getDeclinedEvents(notificationEvent, getRelationsForEvent);
+    const ownUserId = cli.getUserId();
+    return declinedEvents?.some((event) => event.getSender() === ownUserId) ?? false;
+}


I'm sort of surprised tools like this aren't available in the call code itself: it feels quite generally useful, but I guess it can always be moved if needed elsewhere.

dbkr

Thanks for the changes, looks sensible I think

MidhunSureshR added 11 commits July 9, 2026 02:16

Implement view model for duration view

df0202d

Implement vm for face pile view

f770a20

Implement vm for member avatar view

9bc92d0

Expose call store via the sdk context

e5a2bda

Add method to get all calls in store

4d5be22

Add store to track latest notification event per room

44e9048

Also expose new store via sdk context

884a301

Create a base vm for both tiles

d3d28a2

Implement the room ongoing call tile vm

7e1fa79

Implement the dm ongoing call tile vm

0a80027

Support new tile vms in the root tile vm

36d8253

MidhunSureshR added the T-Enhancement label Jul 8, 2026

github-actions Bot deployed to Netlify July 8, 2026 20:49 View deployment

MidhunSureshR changed the base branch from develop to midhun/call/ongoing-tiles/views July 8, 2026 21:04

github-actions Bot deployed to EndToEndTests July 8, 2026 21:08 View deployment

MidhunSureshR marked this pull request as ready for review July 8, 2026 21:10

MidhunSureshR requested review from a team as code owners July 8, 2026 21:10

MidhunSureshR requested review from AndrewFerr, Half-Shot and dbkr and removed request for a team July 8, 2026 21:10

dbkr reviewed Jul 9, 2026

View reviewed changes

MidhunSureshR added 6 commits July 9, 2026 19:25

Rename getCallInRoom -> getCallOrThrow

6803448

Change confusing comment in test

d15b327

Check existing events first and use decryption promise

0769126

Clarify recompute vs update in code comment

9acf29d

Use vi.mocked instead of ts-ignore

8f3a2d0

Change type of size to number

cc2f467

Import only the type

4adbbf8

github-actions Bot deployed to Netlify July 9, 2026 14:03 View deployment

Pass size as number instead of string

d1a86c7

github-actions Bot deployed to Netlify July 9, 2026 14:09 View deployment

github-actions Bot deployed to SharedComponentDiffs July 9, 2026 14:09 View deployment

Check if call is jistsi call in root tile

def32d2

github-actions Bot deployed to Netlify July 9, 2026 14:27 View deployment

github-actions Bot deployed to EndToEndTests July 9, 2026 14:47 View deployment

dbkr approved these changes Jul 9, 2026

View reviewed changes

Uh oh!

Uh oh!

Conversation

MidhunSureshR commented Jul 8, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

dbkr left a comment

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Choose a reason for hiding this comment

Uh oh!

dbkr left a comment

Choose a reason for hiding this comment

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

2 participants

MidhunSureshR commented Jul 8, 2026 •

edited

Loading